/* eslint-disable react/jsx-pascal-case */
import React from 'react';
import { areaList } from '@vant/area-data'
import cookie from 'react-cookies'
const Profile = () => {
    let navigate = React.$router.useNavigate();

    const [form] = React.$Vant.Form.useForm()

    const [LoginUser, setLoginUser] = React.useState(React.$LoginUser ? React.$LoginUser : {})

    const [isShow, setisShow] = React.useState(false)

    const [code, setCode] = React.useState(
        [LoginUser.province, LoginUser.city, LoginUser.district]
    )

    const [avatar, SetAvatar] = React.useState([{
        url: LoginUser.avatar ? LoginUser.avatar : ''
    }])

    const [region, setRegion] = React.useState(LoginUser.region ? LoginUser.region : '')

    // 提交修改
    const onFinish = async(values) => {
        console.log(values)
        let data = {
            id: LoginUser.id,
            nickname: values.nickname,
            email: values.email,
            gender: values.gender,
            province: LoginUser.province,
            city: LoginUser.city,
            district: LoginUser.district
        }

        // 判断是否有修改密码
        if(values.password){
            data.password = values.password
        }

        // 判断是否有图片上传
        if(values.avatar.length > 0 && values.avatar[0].file){
            data.avatar = values.avatar[0].file
        }

        let result =  await React.$api.profile(data)
        if(result.code === 1) {
            // 存储用户登陆信息
            cookie.save('LoginUser', result.data)
            React.$LoginUser = result.data
            React.$Vant.Toast.success({
                message: result.msg,
                onClose: () => {
                    navigate('/business/base/business')
                }
            })
        } else {
            React.$Vant.Toast.fail({
                message: result.msg
            })
        }
    }

    const onConfirmAre = (val, item) => {
        setisShow(false)
        setCode(val)
        let [province, city, district] = item
        let regions = '';
        if (province) {
            regions = province.text + '-'
            LoginUser.province = province.value
        }

        if (city) {
            regions += city.text + '-'
            LoginUser.city = city.value
        }

        if (district) {
            regions += district.text
            LoginUser.district = district.value
        }
        setRegion(regions);
        LoginUser.region = regions
    }

    return (
        <>
            <React.$Vant.NavBar
                title="基本资料"
                onClickLeft={() => navigate('/business/base/business')}
            />

            <React.$Vant.Form
                form={form}
                onFinish={onFinish}
                footer={
                    <div style={{ margin: '16px 16px 0' }}>
                        <React.$Vant.Button round nativeType='submit' type='primary' block>
                            提交
                        </React.$Vant.Button>
                    </div>
                }
            >
                <React.$Vant.Form.Item
                    name='mobile'
                    label='手机号'
                    initialValue={LoginUser.mobile}
                >
                    <React.$Vant.Input readOnly />
                </React.$Vant.Form.Item>
                <React.$Vant.Form.Item
                    name='nickname'
                    label='昵称'
                    initialValue={LoginUser.nickname}
                >
                    <React.$Vant.Input placeholder='请输入昵称' />
                </React.$Vant.Form.Item>
                <React.$Vant.Form.Item
                    rules={[{
                        type: 'email', message: '请填写正确的邮箱'
                    }]}
                    name='email'
                    label='邮箱'
                    initialValue={LoginUser.email ? LoginUser.email : ''}
                >
                    <React.$Vant.Input placeholder='请输入邮箱' />
                </React.$Vant.Form.Item>
                <React.$Vant.Form.Item
                    rules={[{
                        min: 4,
                        max: 16,
                        message: '密码最少4位,最多16个字',
                    }]}
                    name='password'
                    label='密码'
                >
                    <React.$Vant.Input placeholder='请输入密码' type='password' />
                </React.$Vant.Form.Item>
                <React.$Vant.Form.Item name='gender' label='性别' initialValue={LoginUser.gender}>
                    <React.$Vant.Radio.Group direction='horizontal'>
                        <React.$Vant.Radio name='0'>保密</React.$Vant.Radio>
                        <React.$Vant.Radio name='1'>男</React.$Vant.Radio>
                        <React.$Vant.Radio name='2'>女</React.$Vant.Radio>
                    </React.$Vant.Radio.Group>
                </React.$Vant.Form.Item>
                <React.$Vant.Form.Item
                    isLink
                    label='城市选择'
                    onClick={() => setisShow(true)}
                >
                    <React.$Vant.Field
                        readonly
                        value={region}
                        placeholder="请选择地区"
                    />
                </React.$Vant.Form.Item>
                <React.$Vant.Popup position='bottom' visible={isShow} onClose={() => setisShow(false)}>
                    <React.$Vant.Area
                        title='省市区'
                        value={code}
                        areaList={areaList}
                        onConfirm={onConfirmAre}
                        onCancel={() => setisShow(false)}
                    />
                </React.$Vant.Popup>
                <React.$Vant.Form.Item
                    name='avatar'
                    label='头像'
                    initialValue={avatar}
                >
                    <React.$Vant.Uploader maxCount={1} name='avatar'/>
                    
                </React.$Vant.Form.Item>
            </React.$Vant.Form>
        </>
    )
}

export default Profile